<template>
	<div  class="aui-wrapper aui-page__iframe" >
        <div class="aui-content__wrapper" >
            <div class="aui-content" >

				<div shadow="never"  >
					<!-- <el-row :gutter="20">
						<el-col :span="8">
							<el-card shadow="hover" class="mgb20" style="height:252px;">
								<div>
									<img :src="imgURL" alt="图片" class="user-avator">

								</div> -->
								<!--<div class="user-info">
									<img src="../assets/img/1111.jpg" class="user-avator" alt />
									<div class="user-info-cont">
										<div class="user-info-name">你好,{{ realName}}</div>

									</div>
								</div>
								<div class="user-info-list">
									上次登录时间：
									<span>2019-11-01</span>
								</div>
								<div class="user-info-list">
									上次登录地点：
									<span>东莞</span>
								</div>-->
					<!-- 		</el-card>

						</el-col>
						<el-col :span="8">
							<div style="height: 252px">
							<demo2 ref="chart2" style="height: 252px"></demo2>
							</div>
						</el-col>
						<el-col :span="8">
							<div style="height: 252px">
								<demo3 ref="chart3" style="height: 252px"></demo3>
							</div>
						</el-col>

					</el-row> -->
					<el-row>
						<el-col :span="24">

							<div style="height:720px;">
								<demo ref="chart" style="height:720px;"></demo>
							</div>
						</el-col>
						<el-col :span="8" >

						</el-col>
					</el-row>
				</div>
        </div>
        </div>
	</div>

</template>

<script>
    import demo from './echarts/demo'
	import demo2 from "./echarts/demo2";
    import demo3 from "./echarts/demo3";
	import {
		computed,
		ref
	} from "vue";

	import {
		useStore
	} from 'vuex';

	export default {
		name: "dashboard",

		data() {
			return {
				imgURL: require('../assets/img/2222.gif'),
				percentage: 10,
				percentage2: 0,
				colors: [
					{color: '#f56c6c', percentage: 20},
					{color: '#e6a23c', percentage: 40},
					{color: '#5cb87a', percentage: 60},
					{color: '#1989fa', percentage: 80},
					{color: '#6f7ad3', percentage: 100}
				]


				}
			},

		setup() {
			const store = useStore();
			const realName = computed(() => {
				// get: () => {
				return store.state.DUser.realName
				// }
			})
			const loginTime = ref('')
			const lastLoginTime = ref('')

			return {
				realName,
				store
			}
		},
		components: {
            demo,demo2,demo3
		},


		methods: {
			changeDate() {
				const now = new Date().getTime();
				this.data.forEach((item, index) => {
					const date = new Date(now - (6 - index) * 86400000);
					item.name = `${date.getFullYear()}/${date.getMonth() +
          1}/${date.getDate()}`;
				});
			}
		}
	};
</script>

<style scoped>
	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		align-items: center;
		height: 100px;
	}

	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 20px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}
	.about1{
		width: 300px;
		height: 300px;
	}
</style>
